<script setup>
  import { Lock,User} from '@element-plus/icons-vue'//导入图标
  import { ref,watch } from 'vue'
  import { userRegisterService,userLoginService } from '../../api/user'//导入请求服务
  import { useUserStore } from '@/stores'
  import { useRouter } from 'vue-router'
  
  const isRegister = ref(false)
  const form = ref()
  //切换登录与注册
  const changeLNR = () => {
    isRegister.value = !isRegister.value
  }

//与表单双向绑定的数据
  const formModel = ref({
    username: '',
    password: '',
    repassword: ''
  })
//表单的校验规则
  const rules = {
    username:[{required:true,message:'请输入账号',trigger:'blur'},
      {min:1,max:10,message:'账号长度在1-10个字符',trigger:'blur'}],
    password:[{required:true,message:'请输入密码',trigger:'blur'},
      {pattern:/^\S{6,15}$/,
        message:'密码必须是6-15位的非空字符',
        trigger:'blur'}],
    repassword:[{required:true,message:'请再次输入密码',trigger:'blur'},
    {pattern:/^\S{6,15}$/,
        message:'密码必须是6-15位的非空字符',
        trigger:'blur'},
    {
      validator:(rule,value,callback) =>{
        if(value !== formModel.value.password){
          callback(new Error('两次输入的密码不一致'))
        }else{
          callback()//就算校验成功，也需要callback
        } 
      }
    }]
  
  }
  // 注册功能，注册成功之前，先进行校验，校验成功 -> 请求，校验失败 ->自动提示
  const register = async () => {
    await form.value.validate()//校验
    console.log('开始注册请求')

    await userRegisterService(formModel.value)//注册请求
    ElMessage.success('注册成功')
    isRegister.value = !isRegister.value//切换到登录界面
  }

  const userStore = useUserStore()//引用用户仓库
  const router = useRouter()//引用vueRouter
  //登录功能
  const login = async () => {
    await form.value.validate()//表单校验
    console.log('开始登录')
    const res = await userLoginService(formModel.value)//登录请求
    console.log(res)
    userStore.setToken(res.data.token)//存入用户token
    userStore.setUserName(formModel.value.username)//存入用户名
    ElMessage.success('登录成功')
    router.push('/')//跳转到选课页面
  }

  //切换登录与注册的时候，重置表单内容
  watch(isRegister,() => {
    formModel.value = {
      username:'',
      password:'',
      repassword:''
    }
})
</script>

<template>
  <el-row>
  <el-col :span="12" class="bg"></el-col>
  <el-col :span="6" :offset="3" class="form">
    <!-- 注册框架 -->
    <el-form v-if="isRegister" 
    :model="formModel" 
    :rules="rules"
    ref="form">
      <el-form-item>
        <h1>注册</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="formModel.username" placeholder="请输入账号" :prefix-icon="User"></el-input>
      </el-form-item>
      <el-form-item prop ="password">
        <el-input v-model="formModel.password"placeholder="请输入密码" :prefix-icon="Lock"  type="password"></el-input>
      </el-form-item>
      <el-form-item prop ="repassword">
        <el-input  v-model="formModel.repassword" placeholder="再次输入密码" :prefix-icon="Lock"  type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%" @click="register()">注册</el-button>
      </el-form-item>
      <el-form-item>
        <el-link  @click="changeLNR()">返回</el-link>
      </el-form-item>
    </el-form>
    <!-- 登录框架  -->
    <el-form v-else 
    :model="formModel" 
    :rules="rules"
    ref="form">
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="formModel.username" placeholder="请输入账号" :prefix-icon="User"></el-input>
      </el-form-item>
      <el-form-item prop ="password">
        <el-input v-model="formModel.password"placeholder="请输入密码" :prefix-icon="Lock"  type="password" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%" @click="login">登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-link  @click="changeLNR()">注册</el-link>
      </el-form-item>
    </el-form>
  </el-col>
</el-row>

</template>

<style> 
  .bg{
    background-image: url('/9d68c423-36bc-483b-a8fd-19ae5d7c35d1.jpg');
    background-size:cover;
    
  }
  .form{
    margin-top: 12%;
  }
</style>